<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="/headfirst_js/debug/debug.js"></script>
<script>
	var debug;
	
	//prototype으로 객체에 함수를 추가  **익스플로러는 HTMLElement가 없음.
	//익스 플로러용 함수
	/* function prev(elem){
		do{
			elem = elem.previousSibling;	
		}while(elem && elem.nodeType !=1);
		return elem;
	}
	 */
	
	HTMLElement.prototype.prev =  function(){
		var elem = this;
		do{
			elem = elem.previousSibling;	
		}while(elem && elem.nodeType !=1);
		return elem;
	};
	
	HTMLElement.prototype.next = function(){
		var elem = this;
		do{
			elem  = elem.nextSibling;
		}while(elem&&elem.nodeType !=1 );		
		return elem;
	}
	
	HTMLElement.prototype.first=function(){
		var elem = this.firstChild;
		return elem&&elem.nodeType !=1 ?next(elem):elem;
		
	}
	
	HTMLElement.prototype.last=function(){
		var elem = this.lastChild;
		return elem&&elem.nodeType !=1 ? prev(elem):elem;
	}
	
	HTMLElement.prototype.parent=function(num){
		var elem = this;
		num = num||1;
		for(var i=0;i<num;i++){
			if(elem !=null)
				elem = elem.parentNode;
		}
		return elem;
	}
	
	function getTagname(elem){
		elem = elem.getElementsByTagName("strong")[0];
		debug.displayMsg("strong:"+elem);
	}
	
	function style(elem){
		for(var i = 0 ;i<elem.length;i++){
			elem[i].style = "border:1px solid #000000;color:red";
		}
		
	}
	
	//각 엘리멘트를 얻는데는 많은 타이핑이 필요하다. 해결책으로 만든 래퍼 함수
	function id(name){
		return document.getElementById(name);
	}
	
	function tag(name,elem){
		return (elem||document).getElementsByTagName(name);
	}
	
 	window.onload=function(e){
		debug =  new DebugConsole();
		var obj=document.getElementById("btn");
		debug.displayMsg("btn.previousSibling="+obj.prev());
		//익스 플로러용  호출
		//debug.displayMsg("btn.previousSibling="+prev(obj));
		debug.displayMsg("btn.parentNode="+obj.parent(1));
		getTagname(document.getElementById("divE"));
		style(document.getElementsByTagName("li"));
		
		// 래퍼함수 테스트
		debug.displayMsg( "p.next:" +    (tag("p")[0]).next()    );
	}
</script>
</head>
<body>
	<p>p element</p>
	<div id="divE"><strong>this</strong> div element</div>
	<button id="btn">button element</button>
	<ul>
		<li>li1</li>
		<li>li2</li>
		<li>li3</li>
	</ul>
</body>
</html>